<template>
	<div class="app-container">
		<!--面试-->
		<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
			<el-form-item label="手机号" prop="shone">
				<el-input v-model="queryParams.shone" placeholder="请输入手机号" clearable size="small" style="width: 240px"
					@keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>
		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5" v-if="$store.state.currentJur.isAddFace">
				<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
					:disabled="multiple">添加面试</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="multiple"
					@click="handleStatusPeople">修改状态</el-button>
			</el-col>
			<el-col :span="1.5" v-if="$store.state.currentJur.isGenZong">
				<el-button type="primary" plain icon="el-icon-s-comment" size="mini" :disabled="single"
					@click="handleFollowInfo">跟踪信息</el-button>
			</el-col>
			<!--<el-col :span="1.5" v-if="$store.state.currentJur.isEdit">
            <el-button
              type="success"
              plain
              icon="el-icon-edit"
              size="mini"
              :disabled="single"
              @click="handleUpdate(selectionDatas)"
            >修改</el-button>
          </el-col>
          <el-col :span="1.5" v-if="$store.state.currentJur.isDel">
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              :disabled="multiple"
              @click="handleDelete"
            >删除</el-button>
          </el-col>-->
		</el-row>

		<el-table v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="50" align="center" />
			<el-table-column label="编号" align="center" key="Id" prop="Id" />
			<el-table-column label="名称" align="center" key="Username" prop="Username" />
			<el-table-column label="性别" align="center" key="Sex" prop="Sex" />
			<el-table-column label="年龄" align="center" key="Age" prop="Age" />
			<!--<el-table-column label="籍贯" align="center" key="Origin" prop="Origin" />-->
			<el-table-column label="民族" align="center" key="FamilyName" prop="FamilyName" />

			<el-table-column label="手机号" align="center" prop="Shone" width="120" />
			<el-table-column label="身份证" align="center" key="CardID" prop="CardID" :show-overflow-tooltip="true"
				width="120" />
			<el-table-column label="所属单位" align="center" key="CompanyName" prop="CompanyName"
				:show-overflow-tooltip="true" />

			<el-table-column label="所属人" align="center" prop="Belongs" />
			<el-table-column label="入职项目" align="center" prop="EntryProgram" />
			<el-table-column label="分配人" align="center" prop="JobsUser" />


			<el-table-column label="身高" align="center" key="Stature" prop="Stature" />
			<el-table-column label="体重" align="center" key="Weight" prop="Weight" />

			<el-table-column label="岗位信息" align="center" key="Position" prop="Position" />


			<el-table-column label="报到时间" align="center" prop="TeportTime" width="160" />
			<el-table-column label="状态" align="center" key="Status" width="150">
				<template slot-scope="scope">
					<el-link :underline="false"
						:type="(scope.row.Status == '已入职' || scope.row.Status == '在职') ? 'success' : (scope.row.Status=='离职'?'error':'warning')">{{scope.row.Status}}</el-link
						:underline="false">
				</template>
			</el-table-column>
			<el-table-column label="备注" align="center" key="Notes" prop="Notes" />
			<el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width">
				<template slot-scope="scope">

					<el-button v-if="$store.state.currentJur.isDel" size="mini" type="text" icon="el-icon-delete"
						@click="handleDelete(scope.row)">删除</el-button>
					<!-- <el-button v-if="$store.state.currentJur.isStatus" size="mini" type="text" icon="el-icon-edit"
						@click="handleStatusPeople(scope.row)">修改状态</el-button>
					<el-button v-if="$store.state.currentJur.isGenZong" size="mini" type="text" icon="el-icon-s-comment"
						@click="handleFollowInfo(scope.row)">跟踪信息</el-button> -->
					<el-button v-if="$store.state.currentJur.isLook" size="mini" type="text" icon="el-icon-document"
					@click="handleDetail(scope.row)"
						>详细信息</el-button>
            
					<el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)"  v-if="$store.state.currentJur.isGenZong || $store.state.currentJur.isSuoShu || $store.state.currentJur.isStatus || $store.state.currentJur.isPeopFenPei || $store.state.currentJur.isDelFenPei">
                <span class="el-dropdown-link">
                  <i class="el-icon-d-arrow-right el-icon--right"></i>更多
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="handleFollowInfo" icon="el-icon-s-comment" v-if="$store.state.currentJur.isGenZong"
                    >跟踪信息</el-dropdown-item>

                  <el-dropdown-item command="handleStatusPeople" icon="el-icon-edit" v-if="$store.state.currentJur.isStatus"
                    >修改状态</el-dropdown-item>

                </el-dropdown-menu>
              </el-dropdown>
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total>0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.pageSize"
			@pagination="getList" />
		<!-- 添加或修改用户配置对话框 -->
		<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
			<el-form ref="form" :model="form" :rules="rules" label-width="80px">
				<el-row>
					<el-col :span="12">
						<el-form-item label="姓名" prop="name">
							<el-input v-model="form.name" placeholder="请输入姓名" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="手机号" prop="shone">
							<el-input v-model="form.shone" placeholder="请输入手机号" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="微信号" prop="wechat_id">
							<el-input v-model="form.wechat_id" placeholder="请输入微信号" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="备注" prop="notes">
							<el-input type="textarea" v-model="form.notes" placeholder="请输入备注" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
		<!--修改状态-->
		<el-dialog title="修改状态" :visible.sync="statusOpen" width="400px" append-to-body>
			<el-form ref="statusForm" :model="statusForm" :rules="statusRules" label-width="80px">
				<el-row>
					<el-col :span="24">
						<el-form-item label="状态" prop="status_id">
							<el-select v-model="statusForm.status_id" placeholder="请选择状态">
								<el-option v-for="item in statusOptions" :key="item.Id" :label="item.Name"
									:value="item.Id"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="statuSubmitForm">确 定</el-button>
				<el-button @click="statusCancel">取 消</el-button>
			</div>
		</el-dialog>
		<!-- 详细信息 -->
		<el-dialog title="详细信息" :visible.sync="detailOpen" width="600px" append-to-body>
		<el-form ref="detailForm" :model="detailForm" :rules="detailRules" label-width="80px">
		    <el-row>
		        <el-col :span="12">
		            <el-form-item label="名称" prop="username">
						<el-input v-model="detailForm.username" disabled placeholder="请输入名称" maxlength="30" />
		            </el-form-item>
		        </el-col>
		        <el-col :span="12">
		            <el-form-item label="手机号" prop="shone">
		            <el-input v-model="detailForm.shone" disabled placeholder="请输入手机号" />
		            </el-form-item>
		        </el-col>
		        <el-col :span="12">
		            <el-form-item label="身份证" prop="card_id">
		            <el-input v-model="detailForm.card_id" disabled placeholder="请输入身份证" />
		            </el-form-item>
		        </el-col>
		        <el-col :span="12">
		            <el-form-item label="性别" prop="sex">
		              <el-select v-model="detailForm.sex" disabled placeholder="请选择性别">
		                <el-option key="1" label="男" value="男"></el-option>
		                <el-option key="2" label="女" value="女"></el-option>
		              </el-select>
		            </el-form-item>
		        </el-col>
		        <el-col :span="12">
		            <el-form-item label="年龄" prop="age">
		            <el-input v-model="detailForm.age" disabled placeholder="请输入年龄"/>
		            </el-form-item>
		        </el-col>
		        <el-col :span="12">
		            <el-form-item label="籍贯" prop="origin">
		            <el-input v-model="detailForm.origin" disabled placeholder="请输入籍贯"  maxlength="30" />
		            </el-form-item>
		        </el-col>
		        <el-col :span="12">
		            <el-form-item label="民族" prop="family_name">
		            <el-input v-model="detailForm.family_name" disabled placeholder="请输入民族" maxlength="30" />
		            </el-form-item>
		        </el-col>
		        <el-col :span="12">
		            <el-form-item label="身高" prop="stature">
		            <el-input v-model="detailForm.stature" disabled placeholder="请输入身高" maxlength="30" />
		            </el-form-item>
		        </el-col>
		        <el-col :span="12">
		            <el-form-item label="体重" prop="weight">
		            <el-input v-model="detailForm.weight" disabled placeholder="请输入体重" maxlength="30" />
		            </el-form-item>
		        </el-col>




		        <el-col :span="12">
		            <el-form-item label="岗位信息" prop="position">
		              <!--<el-select v-model="form.position" placeholder="请选择岗位信息">
		                <el-option
		                v-for="item in positionOptions"
		                :key="item.id"
		                :label="item.name"
		                :value="item.id"
		                ></el-option>
		            </el-select>-->
		            <el-input v-model="detailForm.position" disabled placeholder="请输入岗位信息" />
		            </el-form-item>
		        </el-col>
		        <el-col :span="12">
		            <el-form-item label="入职项目" prop="EntryProgram">
		            <el-input v-model="detailForm.EntryProgram" disabled placeholder="请输入入职项目" />
		            </el-form-item>
		        </el-col>
		        <el-col :span="12">
		            <el-form-item label="来源" prop="source">
		            <el-input v-model="detailForm.source" disabled placeholder="请输入来源" maxlength="30" />
		            </el-form-item>
		        </el-col>
		        <el-col :span="12">
		            <el-form-item label="所属单位">
		            <el-select v-model="detailForm.company_id" disabled placeholder="请选择单位">
		                <el-option
		                    v-for="item in companyOptions"
		                    :key="item.ID"
		                    :label="item.Name"
		                    :value="item.ID"
		                  ></el-option>
		            </el-select>
		            </el-form-item>
		        </el-col>
		        <el-col :span="12">
		          <el-form-item label="报到时间" prop="teport_time">
		            <el-date-picker clearable size="small" disabled style="width: 100%;"
		              v-model="detailForm.teport_time"
		              type="datetime"
		              value-format="yyyy-MM-dd HH:mm:ss"
		              placeholder="请选择报到时间">
		            </el-date-picker>
		          </el-form-item>
		        </el-col>
		        <el-col :span="12">
		            <el-form-item label="疫苗" prop="vaccinum">
		              <el-input v-model="detailForm.vaccinum" disabled placeholder="请输入疫苗" />
		            </el-form-item>
		        </el-col>
		        <el-col :span="24">
		            <el-form-item label="备注">
		            <el-input v-model="detailForm.notes" disabled type="textarea" placeholder="请输入内容"></el-input>
		            </el-form-item>
		        </el-col>
		    </el-row>
		    <el-row>
		      <el-col><el-divider content-position="left">跟踪信息</el-divider></el-col>
		      <el-col>
		        <el-descriptions class="margin-top"  :column="4" size="mini" border>
		            <el-descriptions-item v-for="(item,index) in JobsTrackss" :key="index">
		              <template slot="label">
		                <!-- <i class="el-icon-user"></i>-->
		                <!--{{index + 1}}-->
		                {{parseTime(item.CreateTime,'{y}-{m}-{d} {h}:{i}')}}
		              </template>
		              {{item.TakeNotes}}
		            </el-descriptions-item>
		        </el-descriptions>
		      </el-col>
		      <el-col><el-divider content-position="left">修改信息</el-divider></el-col>
		      <el-col>
		        <el-descriptions class="margin-top"  :column="3" size="mini" border>
		            <el-descriptions-item v-for="(item,index) in JobsRecords" :key="index">
		              <template slot="label">
		                <!-- <i class="el-icon-user"></i>-->
		                {{index + 1}}
		              </template>
		              {{item.Logs}}
		            </el-descriptions-item>
		        </el-descriptions>
		      </el-col>
		    </el-row>
		</el-form>
    <div slot="footer" class="dialog-footer">
    	<el-button @click="detailOpen=false;detailResetForm();">关 闭</el-button>
    </div>
		</el-dialog>
	</div>
</template>
<script>
	export default {
		name: 'dept_manage',
		data() {
			return {
				// 查询参数
				queryParams: {
					page: 1,
					pageSize: 10,
					shone: '',
				},
				// 遮罩层
				loading: false,
				// 选中数组
				ids: [],
				names: [],
				// 非单个禁用
				single: true,
				// 非多个禁用
				multiple: true,
				selectionDatas: [],
				dateRange: [],
				//  表单参数
				form: {},detailForm:{},
				statusOpen: false,detailOpen:false,JobsTrackss:[],JobsRecords:[],
				statusForm: {},
				statusOptions: [],
				// 总条数
				total: 10,
				// 用户表格数据
				tableData: [],
				// 弹出层标题
				title: "",
				open: false,
				// 表单校验
				companyOptions: [],
				rules: {
					name: [{
						required: true,
						message: "姓名不能为空",
						trigger: "blur"
					}, ],
					shone: [{
							required: true,
							message: "手机号不能为空",
							trigger: "blur"
						},
						{
							pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
							message: "请输入正确的手机号码",
							trigger: "blur"
						}
					],
					wechat_id: [{
						required: true,
						message: "微信号不能为空",
						trigger: "blur"
					}, ],
				},
				statusRules: {
					status_id: [{
						required: true,
						message: "状态不能为空",
						trigger: "change"
					}, ]
				},
        detailRules: {
            username: [
            { required: true, message: "名称不能为空", trigger: "blur" },
            { min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur' }
            ],
            age: [
            // { required: true, message: "年龄不能为空", trigger: "blur" },
            // { type: 'string',min: 0, message: '年龄输入有误', trigger: 'blur' }
            ],
            stature: [
            // { required: true, message: "身高不能为空", trigger: "blur" },
            // { type: 'string',min: 0, message: '身高输入有误', trigger: 'blur' }
            ],
            // email: [
            // {
            //     type: "email",
            //     message: "请输入正确的邮箱地址",
            //     trigger: ["blur", "change"]
            // }
            // ],
            card_id: [
              // { required: true, message: "身份证号不能为空", trigger: "blur" },
              {pattern:  /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[0-2])(([0-2][1-9])|10|20|30|31)\d{3}(\d|X|x)$/,message:'身份证号格式有误',trigger: 'blur'}
            ],
            shone: [
                { required: true, message: "电话不能为空", trigger: "blur" },
                {
                    pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                    message: "请输入正确的手机号码",
                    trigger: "blur"
                }
            ]
        },
			}
		},
		created() {
			this.handleCompony();
			this.getList();
			this.handleInitStatus();
		},
		methods: {
			handleQuery() {
				this.queryParams.page = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.dateRange = [];
				this.resetForm("queryForm");
				this.handleQuery();
			},
			getList() {
				const this_ = this
				this_.$http.get(this_.GLOBAL.REQUESTURL + "/api/interview", {
						page: this_.queryParams.page,
						pageSize: this_.queryParams.pageSize,
						shone: this_.queryParams.shone,
						statusId: 2,
					})
					.then(res => {
						this_.tableData = res.data.jobslist; //给查询列表赋值
						this_.total = res.data.total;
						this_.loading = false;
					})
					.catch(function(err) {
						this_.tableData = [];
						this_.total = 0;
						this_.loading = false;
					});
			},
			handleAdd() {
				this.reset();
				console.log(this.ids)
				const __self = this;
				// this.title = "添加信息";
				// this.open = true;
				this.$confirm('确定添加面试, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					__self.$http.post(__self.GLOBAL.REQUESTURL + "/api/interview", {
							jobs: __self.ids
						})
						.then(res => {
							__self.$modal.msgSuccess(res.msg)
						}).catch(err => {

						})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消'
					});
				});
			},
			//  获取部门
			handleCompony() {
			    const this_ = this
			    this_.$http.get(this_.GLOBAL.REQUESTURL + "/api/company?page=1&pageSize=100&name=")
			    .then(res => {
			        this_.companyOptions = res.data.comlist;
			    })
			},
			/** 详情按钮操作 */
			handleDetail(row) {
			    const that = this;
			    this.detailResetForm();
			    this.detailOpen = true;
			    this.form.editId = row.Id || this.ids;
			    this.$http.get(this.GLOBAL.REQUESTURL+"/api/jobs/"+this.form.editId)
			    .then(res=>{
			      that.detailForm.username= res.data.Username;
			      that.detailForm.shone= res.data.Shone;
			      that.detailForm.card_id= res.data.CardID;
			      that.detailForm.sex= res.data.Sex;
			      that.detailForm.age= res.data.Age;
			      that.detailForm.origin= res.data.Origin;
			      that.detailForm.family_name= res.data.FamilyName;
			      that.detailForm.stature=res.data.Stature;
			      that.detailForm.weight= res.data.Weight;
			      that.detailForm.position= res.data.Position;
			      that.detailForm.EntryProgram = res.data.EntryProgram;
			      that.detailForm.source = res.data.Source;
			      that.detailForm.company_id = res.data.CompanyID;
			      that.detailForm.teport_time= that.parseTime(res.data.TeportTime);
			      that.detailForm.vaccinum = res.data.Vaccinum;
			      that.detailForm.notes= res.data.Notes;
			      that.JobsTrackss = res.data.JobsTrackss;
			      that.JobsRecords = res.data.JobsRecords;
			    }).catch(err=>{

			    })
			},
			handleDelete(row) {
				const _self = this;
				const delIds = row.ID || this.ids;
				const names = row.Name || this.names;
				this.$modal.confirm('确认要删除"' + names + '"吗？').then(function() {
					_self.$http.deleteFn(_self.GLOBAL.REQUESTURL + "/api/resource/" + delIds).then(res => {
						_self.$modal.msgSuccess("删除成功");
						_self.queryParams.page = 1;
						_self.getList();
					}).catch(function() {
						// _self.$modal.msgWarning( "删除失败");
					});
				}).catch(function() {
					// _self.$modal.msgWarning( "删除失败");
				});
			},
			submitForm: function() {
				const _this = this
				this.$refs["form"].validate(valid => {
					if (valid) {
						if (this.form.editId != undefined) {
							_this.$http.put(_this.GLOBAL.REQUESTURL + "/api/resource/" + _this.form.editId,
									_this.form)
								.then(res => {
									if (res.code == 200) {
										_this.$modal.msgSuccess(res.msg);
									} else {
										_this.$modal.msgWarning(res.msg);
									}
									_this.open = false;
									_this.getList();
								})

						} else {
							_this.$http.post(_this.GLOBAL.REQUESTURL + "/api/resource", _this.form)
								.then(res => {
									if (res.code == 200) {
										_this.$modal.msgSuccess(res.msg);
									} else {
										_this.$modal.msgWarning(res.msg);
									}
									_this.open = false;
									_this.getList();
								}).catch(err => {
									// _this.$modal.msgError('新增失败!');
								})
						}
					}
				})
			},
			// 更多操作触发
			handleCommand(command, row) {
				switch (command) {
					case "handleStatusPeople":
						this.handleStatusPeople(row);
						break;
					case "handleFollowInfo":
						this.handleFollowInfo(row);
						break;
					default:
						break;
				}
			},
			//  状态初始化获取
			handleInitStatus() {
				this.$http.get(this.GLOBAL.REQUESTURL + "/api/jobsStatus")
					.then(res => {
						this.statusOptions = res.data;
					}).catch(err => {
						console.log(err)
					})
			},
			//  修改状态
			handleStatusPeople(row) {
				this.statusOpen = true;
				this.statusForm.id = row.Id || this.ids;
			},
			//  修改状态提交
			statuSubmitForm() {
				const self_ = this;
				self_.$refs["statusForm"].validate(valid => {
					if (valid) {
						var statuSubmitId = self_.statusForm.id;
						if (Array.isArray(statuSubmitId) == false) {
							self_.statusForm.id = (String(statuSubmitId).split(',').map(Number));
						};
						self_.$http.patch(self_.GLOBAL.REQUESTURL + "/api/jobsStatus/" + self_.statusForm
								.status_id, {
									jobs_id: self_.statusForm.id
								})
							.then(res => {
								self_.statusOpen = false;
								if (res.code == 200) {
									self_.$modal.msgSuccess(res.msg);
									self_.getList();
								} else {
									self_.$modal.msgWarning(res.msg);
								}
							}).catch(err => {

							})
					}
				})
			},
			//  跟踪信息
			handleFollowInfo(row) {
				const followId = row.Id || this.ids;
				const names = row.Username || this.names;
				const self_ = this;
				this.$prompt('请输入跟踪信息', "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					closeOnClickModal: false,
					inputPattern: /^.+$/, //  非空验证
					inputErrorMessage: "请输入跟踪信息"
				}).then(({
					value
				}) => {
					self_.$http.post(self_.GLOBAL.REQUESTURL + "/api/tracks/" + followId, {
							takenotes: value
						})
						.then(res => {
							self_.$modal.msgSuccess(res.msg)

						}).catch(err => {

						})
					// this.$modal.msgSuccess("修改成功，新密码是：" + value);
				}).catch(() => {});
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.ids = selection.map(item => item.Id);
				this.names = selection.map(item => item.Name);

				this.single = selection.length != 1;
				this.multiple = !selection.length;
				console.log(selection)
				this.selectionDatas = selection[0];
			},
			// 取消按钮
			cancel() {
				this.open = false;
				this.reset();
			},
			//  状态按钮取消
			statusCancel() {
				this.statusOpen = false;
				this.statusForm.status_id = 1;
			},
			// 表单重置
			reset() {
				this.form = {
					editId: undefined,
					name: undefined,
					shone: undefined,
					wechat_id: undefined,
					notes: undefined,
				};
				this.resetForm("form");
			},
      // 详细信息表单重置
      detailResetForm() {
          this.detailForm = {
              username: '',
              sex: '',
              age: '',
              origin: '',
              family_name: '',
              stature: '',
              weight: '',
              shone: '',
              card_id: '',
              position: '',
              EntryProgram: '',
              teport_time: '',
              notes: '',
              source: '',
              vaccinum: ''
          };
          this.resetForm("detailForm");
      },
		}
	}
</script>
